<template>
  <div>
    <div class="Listx">
      <el-table :data="tableData5" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 id:">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称:">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属分类:">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="商品价格:">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="商品图片:">
                <span><img :src="props.row.imgUrl" alt="" /></span>
              </el-form-item>
              <el-form-item label="创建时间:">
                <span>{{ props.row.ctime }}</span>
              </el-form-item>
              <el-form-item label="商品评价:">
                <span>{{ props.row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品销量:">
                <span>{{ props.row.sellCount }}</span>
              </el-form-item>
              <el-form-item label="商品描述:">
                <span>{{ props.row.goodsDesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片" prop="category">
          <template slot-scope="props">
            <img :src="props.row.imgUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作" prop="id">
          <template slot-scope="props">
            <el-button type="primary">编辑</el-button>
            <el-button type="danger" @click="gooddel(props.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { goodsList, goodsListDel } from "@/api/user";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      formData: {
        currentPage: 1,
        pageSize: 9,
        name: "",
        category: "",
      },
      tableData5: [],
    };
  },
  methods: {
    ...mapActions("user", ["goodsList", "goodsListDel"]),

    async gList() {
      let res = await goodsList(this.formData);

      let { msg, data } = res.data;
      console.log(data);
      this.tableData5 = data;
    },
    async gooddel(x) {
      let res = await goodsListDel({ id: x });
      let { msg } = res.data;
      console.log(msg);
      this.gList();
    },
  },
  created() {
    this.gList();
  },
};
</script>

<style lang="css" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
img {
  width: 100px;
  height: 100px;
}
</style>